<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>萌宝投票活动</title>
    <meta name="viewport" content="initial-scale=1, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <style type="text/css">
        @font-face {
            font-family: digit;
            src: url('digital-7_mono.ttf') format("truetype");
        }
    </style>
    <link href="css/default.css" type="text/css" rel="stylesheet">
    <script type="text/javascript" src="js/jquery.js"></script>

    <script type="text/javascript" src="js/jroll.js"></script>
    <script type="text/javascript" src="js/jroll-infinite.js"></script>
    <script type="text/javascript" src="js/jroll-pulldown.js"></script>


    <script type="text/javascript"  src="js/constans.js"></script>
    <link rel="stylesheet" href="css/index.css">

    <style>
        #wrapper {
            position: absolute;
            top: 100px;
            bottom: 0;
            width: 100%;
        }

        .item {
            margin: 0 auto;
            background: #fff;
        }

        input {
            float: left;
            margin-left: 10px;
        }

        img {
            border-radius: 75px;
            height: 150px;
            width: 200px
        }
    </style>
</head>


<body >
<div style=" height: 30px; margin-top: 30px;">

    <div id="search" style="margin: 0 auto; height:30px;width: 220px">
        <input id="name" type="text" name="name"/>
        <input type="submit" onclick="search()" value="查找"/>
    </div>
</div>
<div style="background: #3f7f5f">

    <div id="wrapper">
        <ul id="scroller">

        </ul>
    </div>
</div>

</body>
</html>

<script>


    var jroll = new JRoll("#wrapper", {
        scrollBarY: true
    });
    console.log(JRoll);
    function addClickListner() {
        $(".item").click(function (item) {
            console.log($(this).attr("id"))
            var number = $(this).attr("id");
//投票
            $.ajax({
                url: url + "/kindergarten/vote",
                data: {number: number},
                type: "POST",
                success: function (data) {
                    if (data != "") {
                        alert("投票成功")
                    }
                },
                error: function () {
                    alert("投票失败")
                    jroll.refresh()
                }
            })
        })
    }
    jroll.infinite({
        template: "<div id='{{=_obj.number}}' class='item'>" +
        "<img  src='{{=_obj.pictrue}}'/>" +
        "<span>{{=_obj.name}}:{{=_obj.voteCount}}</span>" +
        "</div>",
        getData: function (page, callback) {
            //完成加载数据的操作后回调执行callback方法
            $.ajax({
                url: url + "/kindergarten",
                data: {page: page},
                type: "POST",
                success: function (data) {
                    console.log(data)
//                    var data = [{index:'ww',text:'ww'}];
                    if (data != "") {

                        jroll.options.total = 4;
                        callback(JSON.parse(data));
                    }
                    else {

                        $(".jroll-infinite-tip").html("服务器暂时停止服务！");
                        alert("服务器不响应")
                    }


                    addClickListner()

                },
                error: function (xhr, status, e) {
                    console.log(status)
                    alert("无法加载更多！")
                },
                //完成请求后触发。即在success或error触发后触发
                complete: function (xhr, status) {

                },
            });
        }
    });

    //下拉刷新
    jroll.pulldown({
        refresh: function (complete) {
            jroll.options.page = 1;
            jroll.scrollTo(0, 44, 0, true);  //滚回顶部
            $.ajax({
                url: url + "/kindergarten",
                data: {page: 1},
                type: "POST",
                success: function (data) {
                    complete();
                    jroll.options.total = 4;
                    jroll.scroller.innerHTML = "";    //清空内容
                    jroll.infinite_callback(JSON.parse(data));
                    addClickListner();
                }
            });
        }
    });

    function search() {

        $.ajax({
            url: url + "/kindergarten/search",
            data: {name: $("#name").val()},
            type: "POST",
            success: function (data) {
                if (data != "") {
                    jroll.options.page = 1;
                    jroll.scroller.innerHTML = "";    //清空内容
                    jroll.scrollTo(0, 44);  //滚回顶部
                    jroll.options.total = 1;
                    jroll.infinite_callback(JSON.parse(data));
                    addClickListner();
                }
            }
        })
    }

</script>

